<template>
  <section 
    id="subscribe" 
    :class="sectionClasses"
    :style="{ 
      backgroundColor: bgColor,
      '--text-color': textColor,
      '--primary-color': primaryColor,
      '--button-bg': buttonBgColor,
      '--button-text': buttonTextColor
    }"
  >
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="max-w-4xl mx-auto text-center">
        <h2 class="text-3xl font-bold mb-4" :style="{ color: textColor }">
          {{ title || '订阅我们的资讯' }}
        </h2>
        <p 
          class="mb-8 max-w-2xl mx-auto"
          :style="{ color: `${textColor}80` }"
        >
          {{ description || '订阅我们的电子通讯，获取最新的行业资讯、产品更新和专属优惠信息' }}
        </p>
        
        <form 
          class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto"
          @submit.prevent="handleSubmit"
        >
          <input 
            type="email" 
            :placeholder="placeholder || '您的邮箱地址'" 
            class="flex-1 px-4 py-3 rounded-lg focus:outline-none text-dark"
            v-model="email"
            :style="{ borderRadius: `${inputRadius}px` }"
            :required="requireEmail"
          >
          <button 
            type="submit" 
            class="px-6 py-3 font-medium rounded-lg hover:opacity-90 transition-custom whitespace-nowrap"
            :style="{ 
              backgroundColor: buttonBgColor,
              color: buttonTextColor,
              borderRadius: `${buttonRadius}px`
            }"
          >
            {{ buttonText || '立即订阅' }}
          </button>
        </form>
        
        <p 
          class="text-sm mt-4"
          :style="{ color: `${textColor}60` }"
          v-if="showPrivacyText"
        >
          我们尊重您的隐私，不会向第三方分享您的信息。您可以随时取消订阅。
        </p>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'SubscribeModule',
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'subscribe-module',
      displayName: '订阅模块',
      description: '用于收集用户邮箱订阅资讯的组件',
      icon: 'fa-envelope',
      category: '交互组件',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'bgColor',
            label: '背景色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'textColor',
            label: '文字颜色',
            type: 'color',
            defaultValue: '#ffffff'
          },
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },

        ]
      },
      {
        title: '按钮与输入框配置',
        fields: [
          {
            name: 'buttonBgColor',
            label: '按钮背景色',
            type: 'color',
            defaultValue: '#ffffff'
          },
          {
            name: 'buttonTextColor',
            label: '按钮文字色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'inputRadius',
            label: '输入框圆角',
            type: 'number',
            min: 0,
            max: 20,
            defaultValue: 8
          },
          {
            name: 'buttonRadius',
            label: '按钮圆角',
            type: 'number',
            min: 0,
            max: 20,
            defaultValue: 8
          },
          {
            name: 'requireEmail',
            label: '必填验证',
            type: 'boolean',
            defaultValue: true
          }
        ]
      },
      {
        title: '内容配置',
        fields: [
          {
            name: 'showPrivacyText',
            label: '显示隐私说明',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'title',
            label: '标题',
            type: 'text',
            defaultValue: ''
          },
          {
            name: 'description',
            label: '描述文本',
            type: 'textarea',
            defaultValue: ''
          },
          {
            name: 'buttonText',
            label: '按钮文字',
            type: 'text',
            defaultValue: ''
          },
          {
            name: 'placeholder',
            label: '输入框提示',
            type: 'text',
            defaultValue: ''
          }
        ]
      },
      {
        title: '样式配置',
        fields: [
          {
            name: 'padding',
            label: '内边距',
            type: 'select',
            options: [
              { label: '小', value: 'small' },
              { label: '中', value: 'medium' },
              { label: '大', value: 'large' }
            ],
            defaultValue: 'medium'
          },
          {
            name: 'titleSize',
            label: '标题大小',
            type: 'select',
            options: [
              { label: '小', value: 'small' },
              { label: '中', value: 'medium' },
              { label: '大', value: 'large' }
            ],
            defaultValue: 'medium'
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'subscribe',
        label: '订阅提交',
        description: '用户提交订阅表单时触发',
        parameters: [
          { name: 'email', type: 'string', description: '用户输入的邮箱地址' },
          { name: 'event', type: 'object', description: '事件对象' }
        ]
      },
      {
        name: 'subscribeSuccess',
        label: '订阅成功',
        description: '订阅提交成功后触发',
        parameters: [
          { name: 'email', type: 'string', description: '用户输入的邮箱地址' }
        ]
      },
      {
        name: 'subscribeError',
        label: '订阅失败',
        description: '订阅提交失败时触发',
        parameters: [
          { name: 'error', type: 'object', description: '错误信息' },
          { name: 'email', type: 'string', description: '用户输入的邮箱地址' }
        ]
      }
    ],
    
    actions: [
      {
        name: 'clearInput',
        label: '清空输入',
        description: '清空邮箱输入框内容'
      }
    ]
  },
  
  props: {
    // 颜色配置
    bgColor: {
      type: String,
      default: '#165DFF'
    },
    textColor: {
      type: String,
      default: '#ffffff'
    },
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    buttonBgColor: {
      type: String,
      default: '#ffffff'
    },
    buttonTextColor: {
      type: String,
      default: '#165DFF'
    },
    

    
    // 样式配置
    padding: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    },
    titleSize: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    },
    inputRadius: {
      type: Number,
      default: 8,
      validator: (value) => value >= 0 && value <= 20
    },
    buttonRadius: {
      type: Number,
      default: 8,
      validator: (value) => value >= 0 && value <= 20
    },
    
    // 内容配置
    showPrivacyText: {
      type: Boolean,
      default: true
    },
    requireEmail: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    description: {
      type: String,
      default: ''
    },
    buttonText: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    

  },
  
  data() {
    return {
      email: '',
      isSubmitting: false
    };
  },
  
  computed: {
    
    // 章节样式类
    sectionClasses() {
      let paddingClass = 'py-12';
      
      switch (this.padding) {
        case 'small':
          paddingClass = 'py-8';
          break;
        case 'medium':
          paddingClass = 'py-16';
          break;
        case 'large':
          paddingClass = 'py-24';
          break;
      }
      
      return `${paddingClass} transition-colors duration-300`;
    },
    
    // 标题样式
    titleStyle() {
      let fontSize = '2.5rem';
      
      switch (this.titleSize) {
        case 'small':
          fontSize = '2rem';
          break;
        case 'medium':
          fontSize = '3rem';
          break;
        case 'large':
          fontSize = '3.5rem';
          break;
      }
      
      return {
        fontSize: fontSize
      };
    }
  },
  
  watch: {},
  
  
  methods: {
    
    /**
     * 验证邮箱格式
     */
    isValidEmail(email) {
      const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(String(email).toLowerCase());
    },
    
    /**
     * 处理表单提交
     */
    handleSubmit() {
      // 验证邮箱
      if (!this.email) {
        if (this.requireEmail) {
          this.$emit('subscribeError', { message: "请输入邮箱地址" }, this.email);
          return;
        }
      } else if (!this.isValidEmail(this.email)) {
          this.$emit('subscribeError', { message: '请输入有效的邮箱地址' }, this.email);
          return;
        }
      
      // 触发订阅事件
      this.$emit('subscribe', this.email);
      
      // 模拟提交状态
      this.isSubmitting = true;
      
      // 实际项目中这里会调用API提交数据
      setTimeout(() => {
        this.isSubmitting = false;
        this.$emit('subscribeSuccess', this.email);
        this.clearInput();
        
        // 可以在这里添加提交成功的提示
      }, 1000);
    },
    
    /**
     * 清空输入框
     */
    clearInput() {
      this.email = '';
    },
    

  }
};
</script>

<style scoped>
/* 基础样式 */
.transition-custom {
  transition: all 0.3s ease;
}

/* 按钮样式 */
.button-primary {
  background-color: var(--button-bg);
  color: var(--button-text);
}

.button-primary:hover {
  opacity: 0.9;
}

/* 输入框样式 */
.input-field:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .subscribe-form {
    flex-direction: column;
  }
  
  .subscribe-button {
    width: 100%;
  }
}
</style>
    